<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="head.css"/>
		<link rel="stylesheet" type="text/css" href="content.css"/>
	</head>
	<body>
		<!--头部-->
		<div id="siteNav">
			<!--导航栏-->
			<div id="siteNavCon">
				<ul class="left">
					<li><a href="#">欢迎来到MobileShop</a></li>
					<li><a href="./pages/login.html"style="color: red;">登入</a></li>
					<li><a href="./pages/registe.html">免费注册</a></li>
				</ul>
				<ul class="right">
					<li><a href="#">我的MobileShop</a></li>
					<li><a href="./pages/shopcar.html">购物车</a></li>
					<li><a href="#">收藏夹</a></li>
					<li><a href="#">商品分类</a></li>
				</ul>
			</div>
			<div id="header">
				<div class="search">
					<div class="logo">
						<img src="img/logo11.jpg"/>
					</div>
					<div class="searchCon">
						<ul class="searchConT">
							<ul>
								<li class="current">宝贝</li>
							</ul>
						</ul>
						<div class="searchConM">
							<div class="left">
								<div class="text">
								<input type="text" id="text" />
							</div>
							<div class="btn">
								<input type="button" value="搜索"/>
							</div>
							<p class="right"><a href="#">高级搜索</a></p>
						</div>
						</div>
						
						<p class="searConB">
							<a href="#">背带裙</a>
							<a href="#">手机</a>
							<a href="#">巧克力</a>
							<a href="#">休闲男鞋</a>
							<a href="#">情侣装</a>
							<a href="#">运动鞋</a>
							<a href="#">凉席</a>
							<a href="#">香水</a>
							<a href="#">行车记录仪</a>
							<a href="#">黄金吊坠</a>
							<a href="#">凉鞋</a>
							<a href="#">女包</a>
							<a href="#">珍珠项链</a>
							<a href="#" class="more">更多</a>
						</p>
					
					</div>
				</div>
			</div>
		</div>
		
		<div id="conter">
			<div class="mainNav">
				<div class="innerCon">
					<div class="innerConRight">
						<a href="#">品牌街						
						<div class="hoverImg">
							
						</div>
						</a>
						<a href="#">水果城</a>
						<a href="#">服装店</a>
						<a href="#">旅行社</a>
						<a href="#">生鲜店</a>
						<a href="#">品牌街</a>
						<a href="#">水果城</a>
						<a href="#">服装店</a>
						<a href="#">旅行社</a>
						<a href="mi8.html">小米8青春版</a>
					</div>
				</div>
			</div>
			
			<div class="categoryAndBanner">
				<div class="category">
					<div class="categoryType">
						<i class="fa fa-list-ul"></i>
						<div class="title">
							商品分类
						</div>
						<div class="category-tab-Con">
							<ul>
								<li class="nav-item">
									<a href="#">服装</a>
									<a href="#">女装</a>
								</li>
								<li class="nav-item">
									<a href="#">男装</a>
									<a href="#">运动户外</a>
								</li>
								<li class="nav-item">
									<a href="#">女鞋</a>
									<a href="#">男鞋</a>
									<a href="#">箱包</a>
								</li>
								<li class="nav-item">
									<a href="#">化妆品</a>
									<a href="#">个人护理</a>
								</li>
								<li class="nav-item">
									<a href="#">手表</a>
									<a href="#">珠宝饰品</a>
									<a href="#">眼镜</a>
								</li>
								<li class="nav-item">
									<a href="#">手机</a>
									<a href="#">数码</a>
									<a href="#">电脑办公</a>
								</li>
								<li class="nav-item">
									<a href="#">服装</a>
									<a href="#">女装</a>
								</li>
								<li class="nav-item">
									<a href="#">服装</a>
									<a href="#">女装</a>
								</li>
								<li class="nav-item">
									<a href="#">服装</a>
									<a href="#">女装</a>
								</li>
								<li class="nav-item">
									<a href="#">服装</a>
									<a href="#">女装</a>
								</li>
								<li class="nav-item">
									<a href="#">服装</a>
									<a href="#">女装</a>
								</li>
								<li class="nav-item">
									<a href="#">服装</a>
									<a href="#">女装</a>
								</li>
								<li class="nav-item">
									<a href="#">服装</a>
									<a href="#">女装</a>
								</li>
								
							</ul>
						</div>
					</div>
				</div>
			</div>
			
		</div>
		
		
		<div class="banner">
			<div class="banner_pic" id="banner_pic">
				<div class="current">
					<img src="img/banner/banner1.jpg"/>
				</div>
				<div class="pic">
					<img src="img/banner/banner2.jpg"/>
				</div>
				<div class="pic">
					<img src="img/banner/banner3.jpg"/>
				</div>
				<div class="pic">
					<img src="img/banner/banner4.jpg"/>
				</div>
				<div class="pic">
					<img src="img/banner/banner5.jpg"/>
				</div>
				
				<ol id="button">
					<li class="current"></li>
					<li class="but"></li>
					<li class="but"></li>
					<li class="but"></li>
					<li class="but"></li>
				</ol>
				</div>
				</div>
				<script type="text/javascript">
				var index = 0;
				var button_li = document.getElementById("button").getElementsByTagName("li");
				var pic_div = document.getElementById("banner_pic").getElementsByTagName("div");
				var time = setInterval(autoChange,2000);
				
				for(var i =0;i<button_li.length;i++){
					//鼠标悬浮
					button_li[i].onmouseover = function(){
						if(time){
							clearInterval(time);
						}
						for (var j=0;j<pic_div.length;j++){
							if(button_li[j] == this){
								index =j;
								button_li[j].className="current";
							pic_div[j].className = 'current';
							}else{
								button_li[j].className="but";
							pic_div[j].className = 'pic';
							}
						}
					}
					button_li[i].onmouseout = function(){
					time = setInterval(autoChange,2000);
				}
				}
				function autoChange(){
					++index;
					if(index == button_li.length){
						index = 0;
					}
					for (var i=0;i<button_li.length;i++){
						if(i == index){
							button_li[i].className="current";
							pic_div[i].className = 'current';
						}else{
							button_li[i].className="but";
							pic_div[i].className = 'pic';
						}
					}
				}
				</script>
				
					
				
					
				
				<div class="brand">
					<ul class="left">
					<li><a href="./pages/detail.html">
						<img 
						style="width: 100%; height: 300px"
							src="./pages/images/计算机网络/计算机网络.jpg"
						/></a></li>
					</ul>
				
				
					<ul class="right">
						<li><a href="#"><img src="img/brand/brand1.jpg"/></a></li>						
						<li><a href="#"><img src="img/brand/brand2.jpg"/></a></li>
						<li><a href="#"><img src="img/brand/brand3.jpg"/></a></li>
						<li><a href="#"><img src="img/brand/brand4.jpg"/></a></li>
						<li><a href="#"><img src="img/brand/brand5.jpg"/></a></li>
						<li><a href="#"><img src="img/brand/brand6.jpg"/></a></li>
						<li><a href="#"><img src="img/brand/brand7.jpg"/></a></li>
						<li><a href="#"><img src="img/brand/brand8.jpg"/></a></li>
						<li><a href="#"><img src="img/brand/brand9.jpg"/></a></li>
						<li><a href="#"><img src="img/brand/brand10.jpg"/></a></li>
						<li><a href="#"><img src="img/brand/brand11.jpg"/></a></li>
						<li><a href="#"><img src="img/brand/brand12.jpg"/></a></li>
					</ul>
				</div>
				
				<div class="floor">
					<div class="floor-left">
						<div class="left-title">
							<i class="color-mark"></i>
							<h2>服装鞋包</h2>
						</div>
						<div class="left-img">
							<a href="#"><img src="img/floor/floor1_left.jpg"/></a>
						</div>
						<div class="left-tag">
							<ul>
								<li>
									<a href="#">POLO衫
									<a href="#">秋装
									<a href="#">裙子
									<a href="#">冬靴
									<a href="#">内增高
									<a href="#">雪地靴	
									<a href="#">西装	
									<a href="#">瑜伽服	
									<a href="#">打底裤	
									<a href="#">半裙
									<a href="#">运动鞋	
									<a href="#">帽子	
								</li>
							</ul>
						</div>
					</div>
						
					<div class="floor-right" id="floor1">
						<ul class="floor-nav" id="floor1Nav">
							<li class="slected" data-index = "1">
								<i></i>
								<h3>男装</h3>
							</li>
							<li class="slected" data-index = "2">
								<i></i>
								<h3>女装</h3>
							</li>
							<li class="slected" data-index = "3">
								<i></i>
								<h3>鞋子靴子</h3>
							</li>
							<li class="slected" data-index = "4">
								<i></i>
								<h3>箱包</h3>
							</li>
						</ul>
						<div class="floor-goodslist" style="display: block;" data-index = "1">
							<ul>
								<li>
									<dl>										
										<dd class="goods-img">
											<a href="#">
												<img src="img/floor/man/goods1.jpg"/>
											</a>
										</dd>
										<dt class="goods-name"><a href="#">海澜之家男装</a></dt>
										<dd class="goods-price">
											<em>￥399.00</em>
										</dd>
									</dl>
								</li>
								<li>
									<dl>										
										<dd class="goods-img">
											<a href="#">
												<img src="img/floor/man/goods2.jpg"/>
											</a>
										</dd>
										<dt class="goods-name"><a href="#">海澜之家男装</a></dt>
										<dd class="goods-price">
											<em>￥399.00</em>
										</dd>
									</dl>
								</li>
								<li>
									<dl>										
										<dd class="goods-img">
											<a href="#">
												<img src="img/floor/man/goods3.jpg"/>
											</a>
										</dd>
										<dt class="goods-name"><a href="#">海澜之家男装</a></dt>
										<dd class="goods-price">
											<em>￥399.00</em>
										</dd>
									</dl>
								</li>
								<li>
									<dl>										
										<dd class="goods-img">
											<a href="#">
												<img src="img/floor/man/goods4.jpg"/>
											</a>
										</dd>
										<dt class="goods-name"><a href="#">海澜之家男装</a></dt>
										<dd class="goods-price">
											<em>￥399.00</em>
										</dd>
									</dl>
								</li>
								<li>
									<dl>										
										<dd class="goods-img">
											<a href="#">
												<img src="img/floor/man/goods5.jpg"/>
											</a>
										</dd>
										<dt class="goods-name"><a href="#">海澜之家男装</a></dt>
										<dd class="goods-price">
											<em>￥399.00</em>
										</dd>
									</dl>
								</li>
								<li>
									<dl>										
										<dd class="goods-img">
											<a href="#">
												<img src="img/floor/man/goods6.jpg"/>
											</a>
										</dd>
										<dt class="goods-name"><a href="#">海澜之家男装</a></dt>
										<dd class="goods-price">
											<em>￥399.00</em>
										</dd>
									</dl>
								</li>
								<li>
									<dl>										
										<dd class="goods-img">
											<a href="#">
												<img src="img/floor/man/goods7.jpg"/>
											</a>
										</dd>
										<dt class="goods-name"><a href="#">海澜之家男装</a></dt>
										<dd class="goods-price">
											<em>￥399.00</em>
										</dd>
									</dl>
								</li>
								<li>
									<dl>										
										<dd class="goods-img">
											<a href="#">
												<img src="img/floor/man/goods8.jpg"/>
											</a>
										</dd>
										<dt class="goods-name"><a href="#">海澜之家男装</a></dt>
										<dd class="goods-price">
											<em>￥399.00</em>
										</dd>
									</dl>
								</li>
								
							</ul>
							
						</div>
						<div class="floor-goodslist" data-index = "2">
							<ul>
								<li>
									<dl>										
										<dd class="goods-img">
											<a href="#">
												<img src="img/floor/gril/goods1.jpg"/>
											</a>
										</dd>
										<dt class="goods-name"><a href="#">女装</a></dt>
										<dd class="goods-price">
											<em>￥399.00</em>
										</dd>
									</dl>
								</li>
								<li>
									<dl>										
										<dd class="goods-img">
											<a href="#">
												<img src="img/floor/gril/goods2.jpg"/>
											</a>
										</dd>
										<dt class="goods-name"><a href="#">女装</a></dt>
										<dd class="goods-price">
											<em>￥399.00</em>
										</dd>
									</dl>
								</li>
								<li>
									<dl>										
										<dd class="goods-img">
											<a href="#">
												<img src="img/floor/gril/goods3.jpg"/>
											</a>
										</dd>
										<dt class="goods-name"><a href="#">女装</a></dt>
										<dd class="goods-price">
											<em>￥399.00</em>
										</dd>
									</dl>
								</li>
								<li>
									<dl>										
										<dd class="goods-img">
											<a href="#">
												<img src="img/floor/gril/goods4.jpg"/>
											</a>
										</dd>
										<dt class="goods-name"><a href="#">女装</a></dt>
										<dd class="goods-price">
											<em>￥399.00</em>
										</dd>
									</dl>
								</li>
								<li>
									<dl>										
										<dd class="goods-img">
											<a href="#">
												<img src="img/floor/gril/goods5.jpg"/>
											</a>
										</dd>
										<dt class="goods-name"><a href="#">女装</a></dt>
										<dd class="goods-price">
											<em>￥399.00</em>
										</dd>
									</dl>
								</li>
								<li>
									<dl>										
										<dd class="goods-img">
											<a href="#">
												<img src="img/floor/gril/goods6.jpg"/>
											</a>
										</dd>
										<dt class="goods-name"><a href="#">女装</a></dt>
										<dd class="goods-price">
											<em>￥399.00</em>
										</dd>
									</dl>
								</li>
								<li>
									<dl>										
										<dd class="goods-img">
											<a href="#">
												<img src="img/floor/gril/goods7.jpg"/>
											</a>
										</dd>
										<dt class="goods-name"><a href="#">女装</a></dt>
										<dd class="goods-price">
											<em>￥399.00</em>
										</dd>
									</dl>
								</li>
								<li>
									<dl>										
										<dd class="goods-img">
											<a href="#">
												<img src="img/floor/gril/goods8.jpg"/>
											</a>
										</dd>
										<dt class="goods-name"><a href="#">女装</a></dt>
										<dd class="goods-price">
											<em>￥399.00</em>
										</dd>
									</dl>
								</li>
								
							</ul>
							
						</div>
						<div class="floor-goodslist" data-index = "3">
							<ul>
								<li>
									<dl>										
										<dd class="goods-img">
											<a href="#">
												<img src="img/floor/shoe/goods1.jpg"/>
											</a>
										</dd>
										<dt class="goods-name"><a href="#">鞋靴</a></dt>
										<dd class="goods-price">
											<em>￥399.00</em>
										</dd>
									</dl>
								</li>
								
								
							</ul>
							
						</div>
						<div class="floor-goodslist" data-index = "4">
							<ul>
								<li>
									<dl>										
										<dd class="goods-img">
											<a href="#">
												<img src="img/floor/luggage/goods1.jpg"/>
											</a>
										</dd>
										<dt class="goods-name"><a href="#">箱包</a></dt>
										<dd class="goods-price">
											<em>￥399.00</em>
										</dd>
									</dl>
								</li>
								
								
							</ul>
							
						</div>
					</div>
				</div>
				
				
		<div id="footer">
			<div id="footerCon">
				<div id="links">
					<dl>
						<dt>用户指南</dt>
						<dd><a href="#">新手指南</a></dd>
						<dd><a href="#">会员积分</a></dd>
						<dd><a href="#">常见问题</a></dd>
						<dd><a href="#">反馈异常</a></dd>
					</dl>
					<dl>
						<dt>品牌服务</dt>
						<dd><a href="#">闪电配送</a></dd>
						<dd><a href="#">快捷支付</a></dd>
						<dd><a href="#">售后保障</a></dd>
						
					</dl>
					<dl>
						<dt>商家合作</dt>
						<dd><a href="#">商家对接</a></dd>
						<dd><a href="#">品牌资质</a></dd>
						<dd><a href="#">进场流程</a></dd>
			
					</dl>
					<dl>
						<dt>关于我们</dt>
						<dd><a href="#">平台简化</a></dd>
						<dd><a href="#">企业文化</a></dd>
						<dd><a href="#">经营模式</a></dd>
						<dd><a href="#">招贤纳士</a></dd>
					</dl>
				</div>
				<div id="otherLinks">
					<a href="#">关于我们</a>|
					<a href="#">购物指南</a>|
					<a href="#">商家合作</a>|
					<a href="#">联系我们</a>|
					<a href="#">招贤纳士</a>|
					<a href="#">反馈调查</a>
					<a href="#">反馈调查</a>
				</div>
				<div id="copyRight">
					Copyright @2016 - 2026 MobileShop 版权所有 | 消费者维权热线:<span style="color: red;">40088888888</span>
				</div>
			</div>
		</div>
	</body>
</html>
